<template>
	<view class="repair-container">
		<view class="form-section">
			<u-form :model="form" ref="uForm">
				<u-form-item label="联系人" prop="name" required>
					<u-input v-model="form.name" placeholder="请输入联系人姓名"></u-input>
				</u-form-item>
				<u-form-item label="联系电话" prop="phone" required>
					<u-input v-model="form.phone" placeholder="请输入联系电话"></u-input>
				</u-form-item>
				<u-form-item label="维修地址" prop="address" required>
					<u-input v-model="form.address" placeholder="请输入详细地址"></u-input>
				</u-form-item>
				<u-form-item label="故障类型" prop="faultType" required>
					<u-radio-group v-model="form.faultType">
						<u-radio v-for="(item, index) in faultTypes" :key="index" :name="item.value">
							{{item.label}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="故障描述" prop="description" required>
					<u-textarea v-model="form.description" placeholder="请详细描述故障情况"></u-textarea>
				</u-form-item>
				<u-form-item label="预约时间" prop="appointmentTime" required>
					<view class="selected-time" @click="showTimePicker = true">
						{{form.appointmentTime ? formatTime(form.appointmentTime) : '请选择预约时间'}}
					</view>
					<u-datetime-picker
						v-model="form.appointmentTime"
						:show="showTimePicker"
						@confirm="onTimeSelect"
						@cancel="showTimePicker = false"
						mode="datetime"
						:min-date="minDate"
						:max-date="maxDate"
					></u-datetime-picker>
				</u-form-item>
			</u-form>
		</view>

		<view class="notice-section">
			<view class="notice-title">
				<u-icon name="info-circle" color="#1296db" size="28"></u-icon>
				<text>维修须知</text>
			</view>
			<view class="notice-content">
				<text>1. 请准确描述故障情况，以便维修人员准备相应工具</text>
				<text>2. 维修人员将提前与您联系确认具体时间</text>
				<text>3. 如需更改预约时间请提前24小时联系客服</text>
				<text>4. 保修期内的故障维修免费，保修期外将收取相应费用</text>
			</view>
		</view>

		<view class="submit-section">
			<u-button type="primary" @click="submitForm">提交维修申请</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = new Date()
		const maxDate = new Date('2035-12-31') // 设置最大时间到2035年底
		return { 
			
			form: {
				name: '',
				phone: '',
				address: '',
				faultType: '',
				description: '',
				appointmentTime: currentDate.getTime(), // 设置初始时间为当前时间
			},
			showTimePicker: false,
			minDate: Date.now(),
			maxDate: Date.now() + 30 * 24 * 60 * 60 * 1000, // 30天后
			faultTypes: [{
				label: '漏水',
				value: 'leak'
			}, {
				label: '水质问题',
				value: 'quality'
			}, {
				label: '噪音问题',
				value: 'noise'
			}, {
				label: '不出水',
				value: 'noWater'
			}, {
				label: '其他',
				value: 'other'
			}],
			rules: {
				name: [{
					required: true,
					message: '请输入联系人姓名',
					trigger: ['blur', 'change']
				}],
				phone: [{
					required: true,
					message: '请输入联系电话',
					trigger: ['blur', 'change']
				}],
				address: [{
					required: true,
					message: '请输入维修地址',
					trigger: ['blur', 'change']
				}],
				faultType: [{
					required: true,
					message: '请选择故障类型',
					trigger: ['blur', 'change']
				}],
				description: [{
					required: true,
					message: '请描述故障情况',
					trigger: ['blur', 'change']
				}],
				appointmentTime: [{
					required: true,
					message: '请选择预约时间',
					trigger: ['blur', 'change']
				}]
			}
		}
	},
	methods: {
		onTimeSelect(timestamp) {
			console.log(timestamp, 'timestamp');
			// timestamp 已经是时间戳，直接赋值给 appointmentTime
			this.form.appointmentTime = timestamp.value;
			this.showTimePicker = false;
		},
		formatTime(time) {
			if (!time) return '';
			const date = new Date(Number(time));
			if (isNaN(date.getTime())) return '';
			
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		submitForm() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.showLoading({
						title: '提交中...'
					})
					
					// 模拟提交
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}, 2000)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.repair-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;

	.form-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		:deep(.u-form-item) {
			margin-bottom: 30rpx;
			
			.u-form-item__body {
				padding: 10rpx 0;
			}
		}

		:deep(.u-radio-group) {
			display: flex;
			flex-wrap: wrap;
			gap: 30rpx;
			padding: 10rpx 0;

			.u-radio {
				margin-right: 0;
				min-width: 180rpx;
			}
		}

		.selected-time {
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx;
			background-color: #f5f5f5;
			border-radius: 8rpx;
			color: #333;
		}
	}

	.notice-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.notice-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}

		.notice-content {
			text {
				display: block;
				font-size: 28rpx;
				color: #666;
				line-height: 1.8;
			}
		}
	}

	.submit-section {
		padding: 40rpx 20rpx;
	}
}
</style>

